<template>
  <div @keyup.enter="getData()">
    <el-form class="query-form" @submit.prevent :inline="true" :model="params">
      <el-form-item label="名称">
        <el-input v-model="params.agency_name" placeholder="保险机构名称查询" clearable>
          <i class="el-icon-search el-input__icon" slot="suffix" @click="getData()"></i>
        </el-input>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button icon="el-icon-plus" @click="handleEdit()">添加机构</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <c-form-dialog
      :visible.sync="formVisible"
      :form-items="formItems"
      :form-data="formData"
      :table-name="tableName"
      :table-id="tableId"
      @success="getData(params.index)"
    ></c-form-dialog>
  </div>
</template>
<script>
import SelectAddress from '@/components/select/SelectAddress'
// import { phoneValidator } from '@/common/plugins/validator'
import { mapGetters } from 'vuex'
import { PATTERN_PHONE } from '@/common/plugins/constant'
export default {
  components: {},
  props: {},
  data() {
    return {
      loading: false,
      params: {
        index: 1,
        size: 15,
        agency_name: '',
      },
      tableName: 'datum_customer_insurance_agency',
      tableData: [],
      totalCount: 0,
      tableColumns: [
        { attrs: { label: '机构名称', prop: 'agency_name' } },
        { attrs: { label: '地址', prop: 'address_detail' } },
        { attrs: { label: '联系人', prop: 'contact' } },
        { attrs: { label: '手机号码', prop: 'mobile_no' } },
        {
          attrs: { label: '操作', align: 'center' },
          operations: [
            { content: '编辑机构', icon: 'fa fa-edit', event: this.handleEdit },
            {
              content: '删除机构',
              icon: 'fa fa-trash',
              attrs: { class: 'text-danger py-0 px-2' },
              event: this.handleDelete,
            },
          ],
        },
      ],

      //
      tableId: '',
      formVisible: false,
      formItems: [
        {
          tag: 'input',
          itemAttrs: {
            label: '机构名称',
            rules: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
          },
          attrs: { key: 'agency_name', value: '', placeholder: '请输入机构名称' },
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '联系人',
            rules: [{ required: true, message: '请输入机构联系人', trigger: 'blur' }],
          },
          attrs: { key: 'contact', value: '', placeholder: '请输入机构联系人' },
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '手机号码',
            rules: [
              {
                required: true,
                message: '请输入手机号码(初始登录密码即为手机号码)',
                trigger: 'blur',
              },
              { validator: PATTERN_PHONE, message: '请输入正确的手机号码', trigger: 'blur' },
            ],
          },
          attrs: { key: 'mobile_no', value: '', placeholder: '请输入联系人手机号码' },
        },
        {
          tag: SelectAddress,
          itemAttrs: { label: '地址' },
          attrs: { key: 'address_code', value: '', class: 'form-control-ml' },
        },
        {
          tag: 'input',
          itemAttrs: { label: '地址详情' },
          attrs: { key: 'address_detail', value: '' },
        },
        {
          tag: 'input',
          itemAttrs: { label: '农担服务商id' },
          attrs: { key: 'service_id', value: '' },
          ifShow: false,
          getValue: () => this.clientId,
        },
        {
          tag: 'input',
          itemAttrs: { label: '组织类型' },
          attrs: { key: 'org_class', value: '' },
          ifShow: false,
          getValue: () => 'org_insurance',
        },
      ],
      formData: {},
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    async getData(index = 1) {
      this.params.index = index
      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, this.params, { create_time: 'asc' })
      )
      this.loading = false
      this.tableData = (res && res.data && res.data.data) || []
      this.totalCount = (res && res.data && res.data.totalCount) || 0
    },

    handleEdit(row) {
      this.tableId = (row && row.id) || ''
      this.formData = row || {}
      this.formVisible = true
    },

    handleDelete(row) {
      this.$msgbox({
        title: '提示',
        message: `确定删除机构：${row.agency_name}?`,
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: async (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonText = '删除中...'
            instance.confirmButtonLoading = true
            const [res, err] = await this.$utils.promise(
              this.$api.deleteData(this.$serviceName, this.tableName, row.id)
            )
            instance.confirmButtonLoading = false
            instance.confirmButtonText = '确定'

            if (res) {
              this.$message.success('删除成功！')
              this.getData()
            } else {
              this.$message.error(`删除失败！${err.status}`)
            }

            done()
          } else {
            done()
          }
        },
      }).catch(() => {})
    },
  },
}
</script>
<style lang="scss" scoped></style>
